<template>
  <basic-container>
    <el-form ref="form" :model="form" label-width="80px" :rules="rules">
      <!-- 课程logo -->
      <el-form-item label="课程LOGO" prop="photoId">
        <!-- <el-upload
          action="/api/updateFile/uploadFilePhoto"
          :accept="acceptFileType"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove"
          :before-upload="beforeAvatarUpload"
          :on-success="handleAvatarSuccess"
          :data="upLoadData"
          :headers="headers"
          list-type="picture"
        >
          <i class="el-icon-plus"></i>
        </el-upload>-->
        <img :src="form.logo" alt />
      </el-form-item>
      <!-- 课程名称 -->
      <el-form-item label="课程名称" prop="name" required>
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <!-- 课程价格 -->
      <el-form-item label="课程价格" prop="price" required>
        <el-input v-model="form.price"></el-input>
      </el-form-item>
      <!-- 课程教师 -->
      <el-form-item label="课程教师" prop="teacher" required>
        <el-input v-model="form.teacher"></el-input>
      </el-form-item>
      <!-- 目标人群 -->
      <!-- <el-form-item label="目标人群" prop="user" required>
        <el-input v-model="form.user"></el-input>
      </el-form-item>-->
      <!-- 视频类别 -->
      <!-- <el-form-item label="视频类型" prop="type">
        <el-cascader
          placeholder
          :options="options"
          :props="props"
          v-model="form.type"
          filterable
          @change="handle($event)"
        ></el-cascader>
      </el-form-item>-->
      <!-- 课程简介 -->
      <!-- <el-form-item label="课程简介" prop="intro" required>
        <el-input v-model="form.intro"></el-input>
      </el-form-item>-->
      <el-form-item>
        <el-button type="primary" @click="onSubmit('form')">立即提交</el-button>
        <el-button @click="$router.push({path: '/course/courseDetail'})">返回</el-button>
      </el-form-item>
    </el-form>
    <!-- 上传图片 -->
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt />
    </el-dialog>
  </basic-container>
</template>

<script>
import {
  typeDetail,
  submit,
  update,
  targetCrowd
} from "@/api/course/courseDetail";
import { uploadFilePhoto } from "@/api/course/uploadFilePhoto";

export default {
  data() {
    return {
      // 上传图片
      dialogImageUrl: "",
      dialogVisible: false,
      action: "",
      acceptFileType: ".xls",
      upLoadData: {
        type: 1,
        name
      },
      props: {
        multiple: true,
        value: "id"
      },
      form: {},
      headers: {
        "Content-Type": "multipart/form-data"
      },
      options: [],
      fileDatas: "",
      imageUrls: "",
      // 表单校验
      rules: {
        name: [{ required: true, message: "请输入名称", trigger: "blur" }],
        price: [{ required: true, message: "请输入价格", trigger: "blur" }],
        teacher: [{ required: true, message: "请输入老师", trigger: "blur" }],
        user: [{ required: true, message: "请输入人群", trigger: "blur" }],
        intro: [{ required: true, message: "请输入课程简介", trigger: "blur" }]
      }
    };
  },
  created() {
    typeDetail().then(res => {
      console.log(res);
      const arr = res.data.data;
      arr.map((item, index) => {
        item["value"] = item.title;
        item["label"] = item.title;
        item.children.map((item, index) => {
          item["value"] = item.title;
          item["label"] = item.title;
        });
      });
      this.options = arr;
    });
    let row = this.$route.query.row;
    this.form = row;
    console.log(this.form);
    // if (row.id !== 0) {
    //   update(row.id).then(res => {
    //     _this.form = res.data.data;
    //     console.log(res.data.data);
    //   });
    // }
    // targetCrowd(targetcrowd).then(res => {
    //   console.log(res);
    // });
  },
  methods: {
    onSubmit(form) {
      console.log(form);
      // 转成字符串类型
      // form.type = form.type.pop() + "";
      this.$refs[form].validate(valid => {
        if (valid) {
          submit(this.form).then(res => {
            console.log(res);
            if (res.data.code == 200) {
              this.$message({
                message: "操作成功",
                type: "success"
              });
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 上传图片
    handleRemove(file, fileList) {
      console.log(file);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    //图片上传成功实现本地预览
    handleAvatarSuccess(res, file) {
      let _this = this;
      _this.form.url = URL.createObjectURL(file.raw);
      // console.log(_this.form.url);
    },
    //上传之前的钩子函数
    beforeAvatarUpload(file) {
      console.log("文件上传");
      console.log(file);
      // let fd = new FormData();
      // fd.append("file", file);
      // fd.append("type", this.upLoadData.type); //传其他参数
      // fd.append("name", this.upLoadData.name); //传其他参数
      // uploadFilePhoto(file).then(res => {
      //   console.log(res);
      //   alert("成功");
      // });
      return false; //屏蔽了action的默认上传
    },
    handle(id) {
      console.log(id);
    }
  }
};
</script>

<style>
</style>
